<template>
  <div>
    this is form demo
    <div>
      <el-form
        ref="userForm"
        :model="user"
        :rule="rule"
        :labelPosition="right"
        label-width="80px"
      >
        <el-form-item label="姓名">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-row justify="space-between">
          <el-form-item label="年龄">
            <el-input-number v-model="user.age"></el-input-number>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="user.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>

        <el-form-item label="爱好">
          <el-checkbox-group v-model="user.hobby">
            <el-checkbox label="吃饭"></el-checkbox>
            <el-checkbox label="睡觉"></el-checkbox>
            <el-checkbox label="打游戏"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="地址"> </el-form-item>
        <el-form-item label="生日">
          <el-date-picker v-model="user.birthday"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="user.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="js">
import { ref, reactive, h } from 'vue'
const user = reactive({
  name: '',
  age: 0,
  sex: '男',
  hobby: [],
  address: {
    province: '',
    city: ''
  },
  birthday: '',
  remark: '',
  picture: '',
})
const rule = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', message: '请输入数字值', trigger: 'blur' }
  ]
}
</script>
